<template>
  <div class="pub-title-container" :style="{marginTop:top}" :class="border?'pub-title-border':''">
    <div class="home-title-left">
      <van-icon :name="icon" size="0.32rem" color="#ff6857" v-if="icon" />
      <img :src="url" style="width:auto;height:0.32rem;" alt="" v-if="url">
      <span class="home-title-text">{{title}}</span>
    </div>
    <div class="home-title-right" v-if="showMore" @click="more">
      <span class="home-title-more">查看更多</span>
      <van-icon name="arrow" size="0.28rem" color="#888" />
    </div>
  </div>
</template>
  <script>
import { Icon } from 'vant';
export default {
  components: { [Icon.name]: Icon },
  props: {
    lineUrl: {
      type: String,
      default: ''
    },
    showMore: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    top: {
      type: String,
      default: '0.2rem'
    },
    title: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  created() {
  },
  methods: {
    more(){
      if(this.lineUrl){
        this.$router.push(this.lineUrl)
      }
    }
  }
};
  </script>
  
  <style lang="less">
.pub-title-border {
  border-bottom: 1px solid #eee;
}
.pub-title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem;
  background: #fff;
  border-bottom: 1px solid #eee;
  .home-title-left {
    display: flex;
    align-items: center;
  }
  .home-title-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .home-title-text {
    font-size: 0.32rem;
    color: #666;
    margin-left: 0.1rem;
    white-space: nowrap;
  }
  .home-title-more {
    font-size: 0.28rem;
    color: #888;
    margin-right: 0.04rem;
    white-space: nowrap;
  }
}
</style>
  